<template>

    <!-- 添加或修改对话框 -->
    <lam-dialog :title="title" :visible.sync="open" width="780px" append-to-body @close="cancel">
      <el-form :ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="formDisabled">
        <el-row>
          <el-col :span="24">
            <el-form-item label="规格名称" prop="specsName" style="margin-left: 5px;margin-right: 5px;">
              <el-input v-model="form.specsName" clearable placeholder="" size="medium"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" >
            <el-form-item label="规格值" prop="prodSpecsValues" >
              <div class="specs-content">
                <div class="specs-content-set">
                  <el-input v-for="(item, index) in form.prodSpecsValues" v-model="item.specsValue" @clear="clearSpecsValues(index)" maxlength="20"
                            show-word-limit clearable class="specs-value-input" placeholder="请输入内容" size="medium"></el-input>
                </div>
                <el-button type="primary" class="add-input" icon="el-icon-circle-plus" size="medium" @click="addInput()"/>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </lam-dialog>

</template>

<style scoped>
  .specs-content{
    border: 1px #dcdfe6 solid;
    border-radius: 4px;
    padding: 10px;
    margin: 0 5px;
  }
  .specs-content-set{
    display: inline;
  }
  .specs-value-input{
    margin-right: 3px;
    margin-bottom: 3px;
    width: 180px;
  }
  .add-input{
    line-height: 14px;
    vertical-align: top;
    height: 36px;
  }
</style>

<script>
import { EditMixin } from '@/components/mixins/EditMixin';

export default {
  name: "EditProdSpecs",
  mixins:[EditMixin],
  data() {
    return {
      form : {
        specsName: null,
        prodSpecsValues: []
      },
      url: {
        base: '/mall/prodSpecs/'
      },
      // 表单校验
      rules: {
        specsName: [{required: true, message: "规格名称不能为空", trigger: "blur" }, {validator: this.specsNameUniqueValidator, trigger: 'blur'}],
        prodSpecsValues: [{required: true, message: "规格值不能为空", trigger: "blur" }, {validator: this.specsValueUniqueValidator, trigger: 'blur'}],
      },
    };
  },
  created() {
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        specsName: null,
        prodSpecsValues: []
      };
    },

    addInput () {
      let temp = this.form.prodSpecsValues
      if (!temp.length || temp[temp.length - 1].specsValue) {
        temp.push({})
      }
    },
    clearSpecsValues (index) {
      debugger
      let temp = this.form.prodSpecsValues
      if (temp.length === 1) {
        return
      }
      temp.splice(index, 1);
    },

    specsNameUniqueValidator(rule, value, callback) {
      if(!value){
        callback(); return;
      }
      let param = {
        specsName: value,
        shopId: this.form.shopId
      };
      if(this.operType=='update') param.id = this.form.id;
      this.checkUniqueAsyn(value, callback, 'prodSpecsSpecsName', param);
    },
    specsValueUniqueValidator(rule, value, callback) {
      let msg = this.checkRepeatValue(value)
      callback(msg == null ? undefined : new Error(msg));
    },

    checkRepeatValue(arr){
      let values = [];
      for (let i in arr) {
        let item = arr[i];
        if(item.specsValue||item.specsValue==0){
          if(values.indexOf(item.specsValue)>-1){
            return '规格值【'+item.specsValue+'】已存在'
          }
          values.push(item.specsValue);
        }else{
          return '有规格值为空'
        }
      }
      return null;
    },


    /** 提交按钮 */
    submitForm(){
      this.saveForm(this.url.base);
    }

  }
};
</script>
